entry {
    ui::interact-with-window {
        title: { const 'Input Demo' },
        content: Root,
        assets: [StyleSheet],
        on-close: { Some { sys::exit 0 } }
    }
};
asset StyleSheet: AssetCSS 'assets/style.css';

type Name {
    first: String,
    last:  String
};
const Root: ui::Component
    \ use let name := { ui::State { |Name| { first: '', last: '' } } },
    let row := { ui::Box ['row'] },
    { { ui::Box ['container'] } [
        { row [
            { ui::Label 'First Name:' },
            { ui::TextInput ('Foo', (name proj |.(first)|).in) }
        ] },
        { row [
            { ui::Label 'Last Name:' },
            { ui::TextInput ('Bar', (name proj |.(last)|).in) }
        ] },
        { row [
            { ui::Label 'Full Name:' },
            { ui::Text (name.out map &{first,last} => { "? ?" (first, last) }) }
                . { with { ui::Style ['seal'] } }
        ] }
    ] };


